import React, { useContext, useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import styles from './Navigation.scss';
import AppContext from '../context';
import getRolePath from '../util/getRolePath';

Navigation.propTypes = {
    history: PropTypes.object
};
export default function Navigation(props) {
    const { location: { pathname } } = props;
    const [items, setItems] = useState([]);
    const app = useContext(AppContext);
    useEffect(() => {
        const menu = getRolePath(app.permission, app.user.permissions);
        setItems(menu);
    }, []);
    function onReplacePath(item) {
        props.history.replace(item.path);
    }
    return (
        <div className={`weui-flex ${styles.nav}`} style={{ display: items.length === 0 ? 'none' : ''}}>
            {items.map(item => <div
                key={item.path}
                className={`weui-flex__item ${pathname === item.path ? styles.select : ''}`}
                onClick={() => onReplacePath(item)}
            >
                <i className={`iconfont ${item.icon}`} />
                <span className='placeholder'>{item.label}</span>
            </div>)}
        </div>
    )
}
